<template>
  <div id="cart">
    <!-- 标题 -->
    <van-nav-bar title="购物车" />
    <!-- 购物车每项数据 -->
    <ul>
      <li class="product" v-for="item in cartlist" :key="item.id">
        <template>
          <van-checkbox
            :name="item.id"
            icon-size="21.5px"
            :value="item.done"
            @click="oneChecked(item.id, item.done)"
          >
            <img :src="item.url" alt="" class="picture" />
            <div class="detail">{{ item.name }}</div>
            <div class="price">￥{{ item.price.toFixed(2) }}</div>
          </van-checkbox>
          <van-stepper
            :name="item.id"
            input-width="31px"
            button-size="14px"
            v-model="item.number"
            :min="0"
            @change="changeNum(item.id, item.number)"
          />
        </template>
      </li>
    </ul>
    <!-- 结算提交栏 -->
    <van-submit-bar
      :price="this.price * 100"
      button-text="去结算"
      @submit="onSubmit"
      button-color="#FFCC00"
    >
      <van-checkbox icon-size="21.5px" v-model="checked"
        ><span class="peisong">配送费￥{{ tip }}</span></van-checkbox
      >
      <template #tip>
        <i>!</i><span>满39免配送费&nbsp;&nbsp;&nbsp;再买</span
        ><i>{{ sum.toFixed(2) }}</i
        ><span>可免费配送</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Cart",
  computed: {
    ...mapState(["cartlist"]),
    sum() {
      return 39 - this.price > 0 ? 39 - this.price : 0;
    },
    tip() {
      if (this.sum <= 0) {
        return 0;
      } else {
        return 5;
      }
    },
    price() {
      let s = 0;
      this.cartlist.forEach((el) => {
        if (el.done) {
          s += el.price * el.number;
        }
      });
      return s;
    },
    checked: {
      get() {
        if (this.cartlist.length) {
          return this.cartlist.every((el) => el.done == true);
        } else {
          return false;
        }
      },
      set(val) {
        this.$store.commit("allChecked", val);
      },
    },
  },
  methods: {
    changeNum(id, num) {
      this.$store.commit("setNumber", { id: id, number: num });
    },
    oneChecked(id, done) {
      const o = {
        id: id,
        done: !done,
      };
      this.$store.commit("oneChecked", o);
    },
    onSubmit() {
      const list = this.cartlist.filter((el) => el.done == true);
      localStorage.setItem("list", JSON.stringify(list));
      this.$router.push({
        path: "/order",
        query: {
          list: list,
          price: this.price,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/var.less";
.van-submit-bar {
  position: fixed;
  bottom: 98px;
  .van-checkbox {
    margin: auto 30px;
  }
}
.van-checkbox {
  position: relative;
  margin-top: 30px;
  margin-left: 50px;
}
/deep/.van-nav-bar__content {
  width: 828px;
  height: 88px;
  background: #ffcc00;
}
/deep/.van-nav-bar__title {
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 40px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #323232;
}
.van-submit-bar__tip {
  background-color: #fbd76a;
  font-size: 11px;
  i {
    color: #ff5b5b;
  }
  span {
    color: #646464;
  }
}
.van-button {
  width: 166px;
  height: 50px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefefe;
}
/deep/.van-submit-bar__bar {
  height: 100px !important;
}
.van-submit-bar__text {
  width: 344px;
  height: 26px;
  line-height: 26px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #ffcc00;
  .van-submit-bar__price {
    color: #ffcc00;
    font-weight: 700;
  }
}
.product {
  position: relative;
}
.van-stepper {
  position: absolute;
  top: 181px;
  left: 611px;
  /deep/.van-stepper__input {
    background-color: #e2e2e2;
    border-radius: 10px;
  }
}
.detail {
  position: absolute;
  top: 19px;
  left: 343px;
  width: 337px;
  height: 73px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #646464;
  line-height: 40px;
}
.price {
  position: absolute;
  left: 343px;
  top: 181px;
  width: 70px;
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #e93f33;
}
.peisong {
  height: 22px;
  line-height: 22px;
  // margin: auto 0;
  font-size: 22px;
  margin-left: 240px;
  color: #909090;
}
.picture {
  // margin-top: 14px;
  margin-left: 50px;
  width: 235px;
  height: 237px;
}
</style>
